<script>
import {ArrowDown, Grid, FolderAdd, Search} from '@element-plus/icons-vue'

import FileUploader from "../components/file-uploader/Index.vue";
import {ElMessage} from "element-plus";
import AppLogo from "../components/AppLogo.vue";

export default {
    setup() {
        return {Search}
    },
    components: {AppLogo, ArrowDown, Grid, FolderAdd, FileUploader},
    data() {
        return {
            currentActiveIndex: "/",
            currentPath: '/',
            search: {
                value: ''
            },
        };
    },
    mounted() {
        this.currentActiveIndex = this.$route.path
    },
    computed:{
        userinfo(){
            return this.$store.state.loginUser
        }
    },
    methods: {
        //记载所有的子文件
        handleHashChange() {
            ElMessage.info({
                title: '成功 加载页面'
            })
        },
        logout(){
            this.$store.commit('clearToken')
            this.$router.replace('/login');
        }
    }
}
</script>
<template>
    <div class="main-pan-app">
        <el-container>
            <el-aside class="pan-left-aside">
                <div class="logo-block">
                    <AppLogo  class="logo-icon" />
                    <span>牛牛的网盘</span>
                </div>
                <el-menu :default-active="currentActiveIndex" class="pan-left-menu" :router="true">
                    <el-menu-item index="/">
                        <span>所有文件</span>
                    </el-menu-item>
                    <el-menu-item index="/histories">
                        <span>最近上传</span>
                    </el-menu-item>
                    <el-menu-item index="/pictures">
                        <span>我的图片</span>
                    </el-menu-item>
                    <el-menu-item index="/documents">
                        <span>我的文档</span>
                    </el-menu-item>
                    <el-menu-item index="/videos">
                        <span>我的视频</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header class="pan-header">
                    <div class="d-flex">
                        <div class="d-flex flex-1">
                            <div class="left-tool-bar" style="padding-top: 15px;">
                                <file-uploader @upload-success="handleHashChange" :current-folder="currentPath"/>
                                <el-button @click="createFolder.visible = true" size="default"
                                           style="margin-left: 10px">
                                    <el-icon>
                                        <folder-add/>
                                    </el-icon>
                                    <span style="margin-left: 4px;">新建文件夹</span>
                                </el-button>
                            </div>
                        </div>
                        <ul class="pan-header-user-right">
                            <li>
                                <el-input
                                    v-model="search.value"
                                    class="search-box" clearable
                                    style="border-radius:30px;"
                                    placeholder="搜索你的文件"
                                    :prefix-icon="Search"
                                />
                            </li>
                            <li>帮助</li>
                            <li>
                                <el-dropdown>
                                    <div class="el-dropdown-link">
                                        <el-avatar class="avatar" :size="30"
                                                   :src="userinfo.avatar"/>
                                        <span class="username">{{ userinfo.nickname }}</span>
                                        <el-icon class="el-icon--right">
                                            <arrow-down/>
                                        </el-icon>
                                    </div>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item>修改资料</el-dropdown-item>
                                            <el-dropdown-item>登录日志查看</el-dropdown-item>
                                            <el-dropdown-item @click="logout">退出</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </li>
                        </ul>
                    </div>
                </el-header>
                <el-main>
                    <!-- 子路由显示的地方 -->
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<style lang="less">


// 平铺显示
.file-block-item {
    margin: 10px 0;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;

    &:hover {
        background-color: var(--el-color-primary-light-8);
    }

    .file-image {
        height: 130px;
        display: flex;
        align-items: center;

        > span {
            margin: auto;
        }
    }

    .file-name {
        font-size: 16px;
    }

    .file-info {
        margin-top: 3px;
        font-size: 12px;
        color: #999;
    }
}
</style>